<template>
	<view style="height: 100%;">
		<view id="search-input"
			style="background-color: #4e77cf;width: auto;position: fixed;left: 0;right: 0;z-index: 999;">
			<!-- 状态栏填充 -->
			<view :style="`height:${app.globalData.sysInfo.STATUS_BAR_HEIGHT}px`"></view>
			<view style="display: flex;align-items: center;padding: 20rpx;">
				<up-icon name="arrow-left" size="48rpx" @click="uni.navigateBack()"
					color="#fff"></up-icon>
				<up-search v-model="cusKeyword" shape="square" placeholder="首拼/名称/编号/条码"
					:clearabled="true" :showAction="false" searchIconColor="#4e77cf"
					height="64rpx"></up-search>
				<up-button @click="searchCus"
					:customStyle="{width:'120rpx',height:'64rpx',marginLeft:'10rpx',color:'#3c9cff'}"
					color="#ebf3fe" text="搜索"></up-button>
				<up-button @click="resetSearch"
					:customStyle="{width:'120rpx',height:'64rpx',marginLeft:'10rpx',color:'#3c9cff'}"
					color="#ebf3fe" text="重置"></up-button>
			</view>
		</view>
		<!-- 填充 -->
		<view :style="{height:searchInputHeight+'px'}"></view>
		<view :style="{'height':app.globalData.sysInfo.SCREEN_HEIGHT-searchInputHeight+'px'}">
			<view v-if="list.length === 0"
				style="height: 100%;display: flex;justify-content: center;align-items: center;">
				<up-empty mode="data" icon="data"></up-empty>
			</view>
			<up-list v-else @scrolltolower="scrolltolower"
				height="100%">
				<up-list-item @click="select(item)" v-for="(item, index) in list" :key="index"
					style="padding: 20rpx;border-bottom: 1px solid #dcdfe6;">
					<view style="font-weight: bold;display: flex;justify-content: space-between;">
						<text>{{item.cusname}}</text>
						<text>{{item.telephone}}</text>
					</view>
					<view
						style="margin-top: 10rpx;display: flex;justify-content: space-between;color:#75747c">
						<text>{{item.address?item.address:'暂无'}}</text>
					</view>
				</up-list-item>
				<up-loadmore :status="status" />
			</up-list>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, watch } from 'vue'
	import { onReady, onLoad } from "@dcloudio/uni-app"
	const app = getApp()

	// data
	const searchInputHeight = ref(0)
	const limitPage = ref({
		page: 1,
		limit: 20,
	})
	const cusKeyword = ref("")
	const list = ref([]);
	const status = ref('loadmore');

	onReady(() => {
		//.box获取class为box的元素，如果使用的id= 'box' 则使用'#box'
		uni.createSelectorQuery().select('#search-input').boundingClientRect(s_data => {
			searchInputHeight.value = s_data.height
		}).exec()
	})

	onLoad(async () => {
		loadmore();
	})

	// 点击选择
	const select = (item) => {
		let pages = getCurrentPages()
		let prevPage = pages[pages.length - 2]; //上一页页面实例
		prevPage._.exposed.setCus(item.cusid, item.cusname)
		uni.navigateBack()
	}

	// 分页搜索客户
	const searchCus = () => {
		list.value = []
		limitPage.value.page = 1
		loadmore();
	};
	// 重置搜索
	const resetSearch = (callback) => {
		list.value = []
		limitPage.value.page = 1
		cusKeyword.value = ""
		loadmore();
	}

	// 滚动加载
	const scrolltolower = () => {
		loadmore();
	};


	const loadmoreWithLoading = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		loadmore()
	}

	const loadmore = async () => {
		status.value = 'loading';
		const params = { ...limitPage.value }
		if (cusKeyword.value.trim() !== "") {
			params.cusname = cusKeyword.value
		}
		try {
			const res = await app.globalData.http.get(
				`/customer/list${app.globalData.queryParams(params, true, 'comma')}`)
			setTimeout(() => {
				if (res.data.rows.length != 0) {
					list.value.push(...res.data.rows);
					limitPage.value.page++;
				}
				status.value = 'nomore';
			}, 200);
		} catch (e) {
			status.value = 'nomore';
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>